<template>
	<view class="s-notice-bar_box" :style="{'--bg':bg,'--height':n_height}">
		<view id="s-notice-bar_li" class="s-notice-bar_li" :style="{ left:left_a+'px','--color':color }">
			<text v-for="(li,i) in txts" :key="i" @click="goClick(li)">{{li.name}}</text>
		</view>
		<view class="s-notice-bar_li" :style="{ left:left_b+'px','--color':color }">
			<text v-for="(li,i) in txts" :key="i" @click="goClick(li)">{{li.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "s-notice-bar",
		data() {
			return {
				left_a: 0,
				left_b: 0
			};
		},
		props: {
			txts: {type:Array,default:[]},
			color: {type:String,default:'#333'},
			bg: {type:String,default:'#f5f5f5'},
			height: {type:[Number,String],default:80},
		},
		computed: {
			n_height() { return uni.upx2px(parseInt(this.height) || 80)+'px'; },
		},
		mounted() {
			this.start();
		},
		methods: {
			goClick(li){
				this.$emit('click',li);
			},
			async start() {
				let wid = 0;
				const el = uni.createSelectorQuery().in(this);
				await el.select('#s-notice-bar_li').boundingClientRect(data => {
					wid = data.width;
				}).exec();
				this.left_b = wid;
				setInterval(() => {
					this.left_a--;
					this.left_b--;
					if (this.left_a < (-wid)) { this.left_a = wid; }
					if (this.left_b < (-wid)) { this.left_b = wid; }
				}, 30)
			}
		}
	}
</script>

<style lang="scss">
	.s-notice-bar {
		&_box {
			position: relative;
			overflow: hidden;
			height: var(--height);
			width: 100%;
			box-sizing: border-box;
			background: var(--bg);
		}
		&_li {
			display: flex;
			top: 5rpx;
			height: 70rpx;
			position: absolute;
			padding-right: 30rpx;
			font-size: 28rpx;
			color:  var(--color);
			text {
				display: inline-block;
				height: 70rpx;
				padding-right: 30rpx;
				line-height: 70rpx;
			}
		}
	}
</style>
